<template>
  <div class="hello">
    <!-- 头像和用户名区域 -->
    <div class="user-info">
      <img :src="avatarUrl" :width="avatarWidth" :height="avatarHeight" alt="头像" class="avatar">
      <span :style="{ fontSize: `${usernameSize}px`, color: usernameColor }" class="username">{{ username }}</span>
    </div>
    <!-- 标题区域 -->
    <h1 :style="{ fontSize: `${titleSize}px`, color: titleColor }" class="title">{{ title }}</h1>
    <!-- 图片区域 -->
    <img :src="mainImageUrl" :width="mainImageWidth" :height="mainImageHeight" alt="主图" class="main-image">
    <!-- 文案区域 -->
    <p :style="{ fontSize: `${descriptionSize}px`, color: descriptionColor }" class="description">{{ description }}</p>
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue';

const props = defineProps({
  avatarUrl: {
    type: String,
    required: true
  },
  username: {
    type: String,
    required: true
  }, 
  title: {
    type: String,
    required: true
  },
  mainImageUrl: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  avatarWidth: {
    type: Number,
    default: 50
  },
  avatarHeight: {
    type: Number,
    default: 50
  },
  mainImageWidth: {
    type: Number,
    default: 400
  },
  mainImageHeight: {
    type: Number,
    default: 300
  },
  usernameSize: {
    type: Number,
    default: 16
  },
  titleSize: {
    type: Number,
    default: 24
  },
  descriptionSize: {
    type: Number,
    default: 14
  },
  usernameColor: {
    type: String,
    default: "#ffffff"
  },
  titleColor: {
    type: String,
    default: "#ffc107"
  },
  descriptionColor: {
    type: String,
    default: "#ffffff"
  }
});

const { avatarUrl, username, title, mainImageUrl, description, avatarWidth, avatarHeight, mainImageWidth, mainImageHeight, usernameSize, titleSize, descriptionSize, usernameColor, titleColor, descriptionColor } = toRefs(props);
</script>

<style scoped>
.hello {
  width: 501px;
  height: 800px;
  background-color: #222; /* 稍微调整背景色 */
  color: #fff;
  padding: 20px;
  /* border-radius: 8px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
}

.avatar {
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover; /* 确保头像显示正常 */
}

.title {
  margin-bottom: 20px;
}

.main-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 4px;
}

.description {
  line-height: 1.6;
}
</style>